import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Placeholder from '@tiptap/extension-placeholder';
import { Bold, Italic, List, ListOrdered, Quote } from 'lucide-react';
import { cn } from '../lib/utils';

interface RichTextEditorProps {
  content: string;
  onChange: (content: string) => void;
  placeholder?: string;
  className?: string;
}

export const RichTextEditor = ({ content, onChange, placeholder = 'Start writing your thoughts...', className }: RichTextEditorProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Placeholder.configure({
        placeholder,
      }),
    ],
    content,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
    editorProps: {
      attributes: {
        class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[200px] p-4',
      },
    },
  });

  if (!editor) {
    return null;
  }

  return (
    <div className={cn('border border-gray-200 rounded-lg bg-white', className)}>
      {/* Toolbar */}
      <div className="border-b border-gray-200 p-2 flex gap-1 flex-wrap">
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={cn(
            'p-2 rounded hover:bg-gray-100 transition-colors',
            editor.isActive('bold') ? 'bg-sage text-white' : 'text-gray-600'
          )}
          title="Bold"
        >
          <Bold size={16} />
        </button>
        
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={cn(
            'p-2 rounded hover:bg-gray-100 transition-colors',
            editor.isActive('italic') ? 'bg-sage text-white' : 'text-gray-600'
          )}
          title="Italic"
        >
          <Italic size={16} />
        </button>
        
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          className={cn(
            'p-2 rounded hover:bg-gray-100 transition-colors',
            editor.isActive('bulletList') ? 'bg-sage text-white' : 'text-gray-600'
          )}
          title="Bullet List"
        >
          <List size={16} />
        </button>
        
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          className={cn(
            'p-2 rounded hover:bg-gray-100 transition-colors',
            editor.isActive('orderedList') ? 'bg-sage text-white' : 'text-gray-600'
          )}
          title="Numbered List"
        >
          <ListOrdered size={16} />
        </button>
        
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
          className={cn(
            'p-2 rounded hover:bg-gray-100 transition-colors',
            editor.isActive('blockquote') ? 'bg-sage text-white' : 'text-gray-600'
          )}
          title="Quote"
        >
          <Quote size={16} />
        </button>
      </div>
      
      {/* Editor Content */}
      <EditorContent 
        editor={editor} 
        className="min-h-[200px] prose prose-sm max-w-none"
      />
      
      {/* Word Count */}
      <div className="border-t border-gray-200 px-4 py-2 text-sm text-gray-500 bg-gray-50">
        {editor.getText().split(/\s+/).filter(word => word.length > 0).length} words
      </div>
    </div>
  );
};